<template>
	<view class="" :style="{'--themcolor':usethemestore.themecolor,'--themcolor2':usethemestore.themecolor2}" v-if="datas">
		<view class="fixtop">
			<fixtitletopVue>
				<template #l>
					<view class="fix-l" @click="back">
						<view>
							<view class="iconfont icon-jiantou"></view>
						</view>
					</view>
				</template>
				<template #c>
					<view class="fix-c">
						修改收获地址
					</view>
				</template>
			</fixtitletopVue>
		</view>
		<view class="" :style="{height:heights}"></view>
		<view class="conbox">
			<view class="map">
				<map :latitude="latitude" :longitude="longitude" scale="14"></map>
			</view>
			<view v-if="!datas.address_address" class="selectadd" @click="changeaddress">选择收货地址 <view class="iconfont icon-jiantou"></view>
		
			</view>
			<view class="selected-address" v-else>
				<view class="l">
					<view class="l-t">{{datas.address_address}}</view>
					<view class="l-b">{{datas.address_name}}</view>
				</view>
				<view class="r" @click="changeaddress">
					修改地址
				</view>
			</view>
			<view class="mp">
				<view class="l">门牌号</view>
				<view class="r">
					<input v-model="datas.xxaddress" type="text" placeholder="详细地址,例:1层101室" placeholder-class="pkace"/>
				</view>
			</view>
			<view class="mp">
				<view class="l">联系人</view>
				<view class="r">
					<input v-model="datas.username" type="text" placeholder="请填写收货人的姓名" placeholder-class="pkace" />
					<radio-group name=""  @change="selectsex">
						<label>
							<radio :checked="datas.sex==0" value="0"/><text>先生</text>
						</label>
						<label>
							<radio :checked="datas.sex==1" value="1"/><text>女士</text>
						</label>
					</radio-group>
				</view>
			</view>
			<view class="mp">
				<view class="l">手机号</view>
				<view class="r">
					<input v-model="datas.phone" placeholder-class="pkace" type="text" placeholder="请填写收货人手机号码" />
				</view>
			</view>
			<view class="saveadd" @click="saveaddress">
				修改地址
			</view>
		</view>
	</view>
	

</template>

<script setup>
	import {
		ref
	} from 'vue'
	import {
		onReady,
		onLoad
	} from '@dcloudio/uni-app'
	import fixtitletopVue from '../../components/fixtitletop/fixtitletop.vue';
	import {
		getstatusheight,
		gettitleheight
	} from '@/util/getsysinfo.js'
	import themestore from '@/store/theme.js'
	import address from '../../store/address';
	const useaddress=address()
	const usethemestore = themestore()
	const heights = getstatusheight() + gettitleheight() + 'px'
	const latitude = ref(0)
	const longitude = ref(0)
	const datas=ref()
	onLoad(e=>{
		datas.value=JSON.parse(e.data)
	})
	onReady(() => {
		uni.getFuzzyLocation({
			type: 'wgs84',
			success(res) {
				latitude.value = res.latitude
				longitude.value = res.longitude
			}
		})
	})
	const selectsex=e=>{
		 datas.value.sex=e.detail.value
	}
	const saveaddress=()=>{
		const index=useaddress.shaddress.findIndex(e=>e.id==datas.value.id)
		 useaddress.shaddress.splice(index,1,datas.value)
		uni.navigateBack()
	}
	const back = () => {

		uni.navigateBack()
	}
	const changeaddress = () => {
		uni.chooseLocation({
			success(e) {
				addressdata.value.address_address=e.address
				addressdata.value.address_name=e.name
			}
		})
	}
</script>

<style lang="scss" scoped>
	:deep(.pkace){
		font-family: "Aa喵不可言";
	}
	.saveadd {
		height: 80rpx;
		width: 320px;
		background-color:var(--themcolor);
		border-radius: 20rpx;
		color: #fff;
		font-size: 25rpx;
		font-weight: 700;
		display: flex;
		align-items: center;
		justify-content: center;
		margin: 550rpx auto 0 auto;
	}

	.mp {
		height: 80rpx;
		width: 100%;
		display: flex;
		align-items: center;
		gap: 20rpx;
		margin-bottom: 10rpx;

		.l {
			width: 120rpx;
			text-align: center;
			font-size: 30rpx;
		}

		.r {
			flex: 1;
			height: 100%;
			display: flex;
			align-items: center;
			border-bottom: 1rpx solid #eee;
			font-size: 25rpx;

			radio {
				transform: scale(0.7);
			}
		}
	}

	.conbox {
		padding: 20rpx;
		width: 100%;

		.selected-address {
			height: 100rpx;
			width: 700rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 20rpx;
			background-color: #fff;
			margin: 40rpx 0;
			border-bottom: 1rpx solid #eee;
			.l{
				flex: 1;
				display: flex;
				flex-direction: column;
				justify-content: center;
				gap: 15rpx;
				.l-t{
					font-size: 27rpx;
					width: 500rpx;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
					
				}
				.l-b{
					font-size: 22rpx;
					color: #7b7b7b;
					width: 500rpx;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
				}
			}
			.r{
				padding: 10rpx 15rpx;
				font-size: 25rpx;
				color:  var(--themcolor);
				border: 1rpx solid var(--themcolor);
				border-radius: 20rpx;
			}
		}

		.selectadd {
			height: 80rpx;
			width: 700rpx;
			border-radius: 20rpx;
			;
			color: var(--themcolor);
			border: 1rpx solid var(--themcolor);
			display: flex;
			align-items: center;
			justify-content: center;
			margin: 30rpx auto 30rpx auto;
			font-size: 30rpx;
			font-weight: 700;
			gap: 10rpx;

			.iconfont {
				font-size: 20rpx;
				color:var(--themcolor);
				transform: rotate(180deg);
			}
		}

		.map {
			height: 300rpx;
			width: 100%;
			border-radius: 15rpx;
			overflow: hidden;

			map {
				height: 100%;
				width: 100%;
			}
		}
	}

	.fixtop {
		position: fixed;
		width: 100%;
		top: 0;
		background-color: #eee;
		padding: 0 20rpx;
		border-bottom: 1rpx solid #dcdcdc;

		.fix-l {
			height: 100%;
			width: 100%;
			display: flex;
			align-items: center;

			.iconfont {
				font-size: 25rpx;
			}
		}

		.fix-c {
			height: 100%;
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 30rpx;
		}
	}
</style>